<template>
	<div class="guessContent" ref='guessContent'>
		<div class="wrap">
			<router-link :to='"/travelhome/detail/"+item.id' tag='div'
			  class="content" v-for='item of list' :key='item.key' >
				  <div class="content_img">
					  <img :src="item.imgUrl">
					  <div>
						  <span class="Comment">{{item.crite}}</span>
					  </div>
				  </div>
				  <p class="desc">{{item.desc}}</p>
				  <span class="carInfor">{{item.logo}}</span>
				  <div class='content_prise'>
					  <span class="address">酒店距景点{{item.distance}}km</span>
					  <div class="prise">
						  <span class="desc_prise"><span class="Rmb">¥ </span><span class="priseNum">{{item.prise}}</span>起</span>
					  </div>
				  </div>
			  </router-link>
		</div>
	</div>
  
</template>

<script>
import axios from 'axios'
export default {
  name: 'travel_homeGuessContent',
  props:{
	  isNum:Number
  },
  data(){
	  return{
		  list:'',
		  Num:''
	  }
  },
   methods:{
  	  getHomeData(){
  	  		  axios.get("/api/index1.json").then(this.getDataSucc)
  	  },
  	  getDataSucc(res){
  	  		  res=res.data
  	  		  if(res.data){
  	  			  const data=res.data
  	  			  this.list=data.guessList
  	  		  }
  	  }
  },
  mounted(){
  	   this.getHomeData()
	   let goY=parseInt(this.$refs.guessContent.offsetTop)
	   this.$emit("goY",goY)
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.guessContent
	width:100%
	background:#fff
	.wrap
		width:94%
		margin:0 auto
		overflow:hidden
		padding:0.2rem 0
		.content
			width:100%
			margin-bottom:1rem
			.content_img
				width:100%
				position:relative
				img
					width:100%
				div
					position:absolute
					left:0
					bottom:0
					width:100%
					height:0.7rem
					color:#fff
					background:rgba(0,0,0,.2)
					span
						display:block
						float:left
						margin-left:0.2rem
						line-height:0.7rem
			.desc
				font-size:0.32rem
				margin:0.2rem 0
				line-height:0.4rem
				font-weight:bold
			.carInfor
				margin:0.15rem 0
				color:#23beae
				border:1px solid #91ded6
				padding:0.02rem
			.content_prise
				.address
					margin:0.1rem 0
					float:left
				.desc_prise
					float:right
					margin-right:0.2rem
					.priseNum
						color:red
						font-size:0.4rem
</style>
